<template>
  <div id="liuLiang">
    <div class="bg-color-my">
      <div class="d-flex pt-2 pl-2">
        <span style="color: #5cd9e8">
          <icon name="align-left" width="0.3rem" height="0.3rem"></icon>
        </span>
        <span
          class="fs-xl text mx-2"
          style="line-height: 0.3rem; font-size: 0.2rem;color: white;"
          >分水口实时流量(m³/h)</span
        >
      </div>
      <div class="d-flex jc-center body-box" style="margin-top: 0">
        <dv-capsule-chart :config="config" style="width: 90%; height: 5.4rem" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      config: {
        showValue: true,

        data: [],
      },
    };
  },
  components: {},
  created() {
    setTimeout(() => {
      this.changData();
      this.timer = setInterval(this.changData, 60000);
    }, 200);
  },
  methods: {
    async changData() {
      var _this = this;
      let result = await _this.$http.get("api/bi/selectFSKSSQSL.do");
      if (result && result.status === 200) {
        let data = result.data.map((item) => {
          item.value = item.value ? parseInt(item.value) : 0;
          return item;
        });


        _this.config.data = data;
        _this.config = JSON.parse(JSON.stringify(_this.config));
      }
    },
  },
};
</script>

<style lang="scss" >
#liuLiang {
  padding: 0.05rem;
  height: 6 rem;
  border-radius: 0.0625rem;
  .bg-color-my {
    height: 6 rem;
    border-radius: 0.1rem;
    overflow: hidden;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 0.1rem;
    overflow: hidden;
  }
}
.dv-capsule-chart .capsule-item {
  height: 18px;
  margin-top: 2px;
}
.dv-capsule-chart .capsule-item div {
  height: 18px !important;
  margin-top: 2px;
}
</style>